import { initLifecycle } from './lifecircle'
import { initEvents } from './events'
import { initRender } from './render'
import { initInjections, initProvide } from './inject'
import { initState } from './state'
import Watcher from '../observer/watcher'

export function initMixin(Vue){
    Vue.prototype._init = function(options){
        const vm = this
        vm.$options = mergeOptions({},options || {},vm)  //合并参数
        initLifecycle(vm) //初始化钩子函数
        initEvents(vm) //初始化事件
        initRender(vm) //初始化渲染
        // beforeCreate
        initInjections(vm) //初始化依赖注入
        initState(vm)  //初始化数据
        initProvide(vm) //初始化 provideer
        //created
        if (vm.$options.el) {
            vm.$mount(vm.$options.el)  //将页面挂载到el
        }
    } 
    //模板编译的几个关键节点：
        //1、
    Vue.prototype.$mount = function(el){
        let vm = this;
        if(typeof el == 'string'){
            vm.$el = document.querySelector(el)
        }
       //页面渲染是通过watcher进行的
       //挂载时分几种情况
       //1、直接使用render方法
       //2、options.template
       //3、<template></template>
        let updateComponent = ()=>{
            vm._update()  //更新组件
        }
        new Watcher(vm,updateComponent) //更新组件，渲染的逻辑
    }
    //lifecircle

}
function mergeOptions(options,vm){
    return Object.assign({},options,vm)
}